<template>
	 <index v-if="isShow" ></index>
	<view v-else>
		<view class="title">
			<u-icon name="map"></u-icon>
			<u-search placeholder="请输入内容" v-model="keyword"  @custom="sou" ></u-search>
		</view>
		<view class="hsuma">
			<u-tabs :list="catelist" @click="getCateInfo"></u-tabs>
		</view>
		<view class="">
			<u-swiper :list="list1" circular indicator height="400rpx"></u-swiper>
		</view>
		<view>
			<u-grid col="5">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<image class="imag" :src="baseListItem.name" mode=""></image>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<view class="crnten">
			<view class="z">
				<image src="../../static/image/图1.png" mode=""></image>
			</view>
			<view class="y">
				<image class="tu1" src="../../static/image/图2.png" mode=""></image>
				<image class="tu2" src="../../static/image/图3.png" mode=""></image>
			</view>
		</view>
		<view class="cen">
			<text class="shuang">双11尖货预购</text>
			<text class="cheng">畅购全球</text>
		</view>
		<view class="tu">
			<image src="../../static/image/底1.png" mode=""></image>
			<image src="../../static/image/底2.png" mode=""></image>
			<image src="../../static/image/底3.png" mode=""></image>
			<image src="../../static/image/底4.png" mode=""></image>
		</view>
		<!-- 商品类型的切换 -->
		<view class="butotn">
			<u-subsection activeColor="#f56c6c" @change="changeType" mode='subsection' :list="goodsInfo"
				:current="current"></u-subsection>
		</view>
		<view >
			<ul>
				<li class='box' v-for="item in goodListL" :key="item.id"  @click="arr(item.id)">

					<view class="l">
						<image :src="'http://localhost:3000'+item.img" mode=""></image>
					</view>
					<view class="w">
						<view class="">
							{{item.goodsname}}
						</view>
						<view class="xj">
							<text>现价</text>
							<text>{{item.price}}</text>
						</view>
						<view class="yj">
							<text>原价</text>
							<text>{{item.market_price}}</text>
						</view>
						<button>购买</button>
					</view>
				</li>


			</ul>
		</view>
	</view>
</template>

<script>
	import {
		getBanner,
		getCate,
		getHortgoods
	} from '@/reuqust/api.js'
	import Index from '@/component/index.vue'
	export default {
		data() {
			return {
				keyword: '',
				isShow:true,
				list1: [],
				catelist: [],
				baseList: [{
						name: '../../static/image/限时抢购.png',
						title: '限时抢购'
					},
					{
						name: '../../static/image/畅销商品.png',
						title: '畅销商品'
					},
					{
						name: '../../static/image/品质大牌.png',
						title: '品质大牌'
					},
					{
						name: '../../static/image/小u自营.png',
						title: '小u自营'
					},
					{
						name: '../../static/image/积分兑换.png',
						title: '积分兑换'
					}
				],
				goodsInfo: ['热门推荐', '上新推荐', '所有商品'],
				current: 0,
				arrgoodList: [],
				goodListL: [],
			}

		},
		onLoad() {
			setTimeout(err=>{
				this.isShow = false
			},2000),
			this.getBannerList(),
				this.getCatelist(),
				this.getHortgoodslist()
		},
		components:{
			Index,
		},
		methods: {
			// 首页分类
			async getCatelist() {
				let res = await getCate()
				if (res.data.code == 200) {
					this.catelist = res.data.list.map(item => ({
						name: item.catename
					}))
				}
			},
			// 搜索框框跳转
			sou(index){
			   uni.navigateTo({
	                 url: "../lists/lists?id="+index
			   })
			},
			// 分类跳转
			getCateInfo(item) {
				let id = item.index+1
				console.log(item,'item````');
				// console.log(index,'index');
				uni.navigateTo({
					url: "../list/list?id="+id +"&type="+1
				})
			},
			// 轮播图
			async getBannerList() {
				let res = await getBanner()
				if (res.data.code == 200) {
					this.list1 = res.data.list.map(item => this.$imgUrl + item.img)
				}
			},
			arr(i){
				console.log(i,'积极')
				uni.navigateTo({
					url:'../../pages/detail/detail?id='+i
				})
			},
			changeType(e) {
			//封装一个切换分段器的事件
				console.log(e, '事件源对象');
				this.current = e
				this.goodListL = this.arrgoodList[e].content
				// this.goodListL.img = res.data.list[e].content.map(item=>{
				//      item.img = this.$imgUrl + item.img
				// })
			},
			//封装首页信息
			async getHortgoodslist() {
				let res = await getHortgoods()
				console.log(res, '222');
				if (res.data.code == 200) {
					this.arrgoodList = res.data.list
					this.goodListL = res.data.list[0].content
				}
			}
		}
	}
</script>

<style lang="scss">
	.title {
		display: flex;
		background-color: red;
	}

	.hsuma {
		background-color: red;
	}

	.grid-text {
		font-size: 18rpx;
		color: #000;
		padding: 10rpx 0 0rpx 0rpx;
		box-sizing: border-box;
	}

	image {
		width: 100%;
		height: 200rpx;
	}

	.imag {
		width: 60rpx;
		height: 60rpx;
	}

	.cen {
		margin-top: 30rpx;
	}

	.butotn {
		margin-top: 50rpx;
	}

	.cen .shuang {
		// font-family: PingFangSC-Semibold;
		font-size: 47rpx;
		color: #FF6040;
		text-align: center;
		margin-left: 92rpx;
		margin-top: 60rpx;
	}

	.cen .cheng {
		font-family: PingFangSC-Light;
		font-size: 47rpx;
		color:  #000;
		text-align: center;
		line-height: 28rpx;
		margin-left: 120rpx;
	}

	.tu {
		display: flex;
		height: 200rpx;
		margin-top: 30rpx;
	}

	.box {
		border: 1rpx solid #ccc;
		display: flex;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.l image {
		width: 260rpx;
		height: 200rpx;
	}

	.l {
		margin-right: 30rpx;

	}

	button {
		background-color: orange;
		width: 200rpx;
		height: 60rpx;
		color: white;
		line-height: 60rpx;
	}

	.w view {
		margin-bottom: 10rpx;
	}

	.xj {
		color: red;
	}

	.yj {
		color: #ccc;
		text-decoration: line-through
	}

	.crnten {
		width: 100%;
		height: 80%;
		background-color: #909399;
		display: flex;
		margin-top: 30rpx;
	}

	.z {
		width: 400rpx;
		;
	}

	.z image {
		height: 100%;
	}

	.y {
		width: 350rpx;
	}
</style>
